<div ng-cloak class="asset-modal">

    <w-asset-info-head ng-cloak asset-id="$ctrl.asset.id"></w-asset-info-head>

    <w-tabs class="inner" ng-model="$ctrl.tab">
        <w-tab id="::'info'"
               title-name="::'modal.assetInfo.details'"
               class="padding-content tab-details">
            <div class="line ">
                <div class="basic-500" w-i18n="modal.assetInfo.issuer"></div>
                <div class="basic-900 break-all fs-mobile">{{::$ctrl.asset.sender}}</div>
            </div>
            <div class="line">
                <div class="basic-500" w-i18n="modal.assetInfo.identifier"></div>
                <div class="basic-900 break-all fs-mobile">{{::$ctrl.asset.id}}</div>
            </div>
            <div class="line">
                <div class="basic-500" w-i18n="modal.assetInfo.name"></div>
                <div class="basic-900">{{::$ctrl.asset.name}}</div>
            </div>
            <div class="line" ng-if="$ctrl.asset.ticker">
                <div class="basic-500" w-i18n="modal.assetInfo.ticker"></div>
                <div class="basic-900">{{::$ctrl.asset.ticker}}</div>
            </div>
            <div class="line">
                <div class="basic-500" w-i18n="modal.assetInfo.quantity"></div>
                <div class="basic-900">{{::$ctrl.quantity}}</div>
            </div>
            <div class="line">
                <div class="basic-500" w-i18n="modal.assetInfo.decimals"></div>
                <div class="basic-900">{{::$ctrl.asset.precision}}</div>
            </div>
            <div class="line">
                <div class="basic-500" w-i18n="modal.assetInfo.type"></div>
                <div class="basic-900">
                    <span w-i18n="modal.assetInfo.reissue.{{::$ctrl.asset.reissuable ? 'yes' : 'no'}}"></span>
                </div>
            </div>
            <div class="line" ng-if="$ctrl.asset.hasScript">
                <div class="basic-500" w-i18n="modal.setAssetScript.script"></div>
                <div class="basic-900">
                    <span w-i18n="modal.setAssetScript.scripted"></span>
                </div>
            </div>
            <div class="line" ng-if="::$ctrl.minFee">
                <div class="basic-500" w-i18n="modal.assetInfo.sponsorshipFee"></div>
                <div class="basic-900">
                    <span w-i18n="fee" params="{money: $ctrl.minFee}"></span>
                </div>
            </div>
            <div class="line">
                <div class="basic-500" w-i18n="modal.assetInfo.date"></div>
                <div class="basic-900">{{::$ctrl.asset.timestamp | date:'dd.MM.yyyy HH:mm'}}</div>
            </div>
            <div class="line" ng-if="::$ctrl.link">
                <div class="basic-500" w-i18n="modal.assetInfo.site"></div>
                <a target="_blank" rel="noopener noreferrer" href="{{::$ctrl.link}}">{{::$ctrl.link}}</a>
            </div>
            <div class="line" ng-if="::$ctrl.email">
                <div class="basic-500" w-i18n="modal.assetInfo.email"></div>
                <a target="_blank" rel="noopener noreferrer" href="mailto:{{::$ctrl.email}}">{{::$ctrl.email}}</a>
            </div>
            <div class="line" ng-if="::$ctrl.provider">
                <span class="basic-500" w-i18n-ns="app.utils" w-i18n="modal.assetInfo.qualified"></span>
                <span class="basic-900">{{::$ctrl.provider}}</span>
            </div>
            <div ng-if="$ctrl.description" class="asset-description line margin-top-2 basic-900">
                {{::$ctrl.description}}
            </div>

        </w-tab>
        <w-tab ng-if="!$ctrl.isDemo"
               id="::'balance'"
               title-name="::'modal.assetInfo.balance'"
               class="padding-content tab-balance">
            <div class="line chart-container">
                <div>
                    <w-circle-chart options="$ctrl.chartOptions" data="$ctrl.circleChartData"></w-circle-chart>
                </div>
                <div class="chart-legend">
                    <div ng-repeat="legend in $ctrl.circleChartData track by legend.id"
                         ng-if="!legend.value.getTokens().eq(0)"
                         class="legend-item">
                        <div class="part basic-500">
                            <div class="legend-color margin-right-1"
                                 style="background-color: {{::$ctrl.chartOptions.items[legend.id].color}}"></div>
                            <span w-i18n="modal.assetInfo.{{::legend.id}}"></span>
                        </div>
                        <div class="part">
                            <w-balance money="legend.value"></w-balance>
                        </div>
                    </div>
                    <div class="legend-item total">
                        <div w-i18n="modal.assetInfo.total"></div>
                        <div class="part">
                            <w-balance money="$ctrl.totalBalance"></w-balance>
                        </div>
                    </div>
                </div>
            </div>
        </w-tab>
        <w-tab ng-if="!$ctrl.isDemo"
               id="::'tx'"
               title-name="::'modal.assetInfo.transactions'">
            <w-transaction-list transactions="$ctrl.transactions"
                                parent-selector=".tab-tem"
                                pending="$ctrl.transactionsPending"></w-transaction-list>
        </w-tab>
    </w-tabs>
</div>
